<template>
  <el-table ref="main-table" :data="data" style="width: 100%" row-key="id" v-bind="tableConfig" v-on="event" @selection-change="(val) => $emit('selection-change', val)">
    <template v-if="showSelect">
      <el-table-column type="selection" width="55" v-bind="selectionOption" />
    </template>
    <el-table-column type="index" fixed label="序号" align="center" width="100" />
    <template v-for="(column, index) of columns">
      <el-table-column :key="index" :show-overflow-tooltip="!column.showTooltip" align="center" v-bind="column">
        <template v-if="column.useSlot" v-slot="scope">
          <slot :name="column.prop" v-bind="scope" />
        </template>
        <template v-else-if="column.formatterHTML" v-slot="scope">
          <div v-html="column.formatterHTML(scope.row)"></div>
        </template>
      </el-table-column>
    </template>
  </el-table>
</template>

<script>

export default {
  name: "JsonTable",
  props: {
    loading: {
      type: Boolean,
      default: false
    },
    data: {
      type: Array,
      default: () => []
    },
    showSelect: {
      type: Boolean,
      default: false
    },
    config: {
      type: Object,
      default: () => ({})
    },
    event: {
      type: Object,
      default: () => ({})
    },
    columns: {
      type: Array,
      default: () => []
    },
    selectionOption: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    tableConfig() {
      return {
        // "header-cell-style": { backgroundColor: "#f3f3f3", color: "#383a79" },
        "tooltip-effect": "dark",
        ...this.config
      };
    }
  },
  methods: {
    // 重新刷新布局
    doLayout() {
      this.$refs["main-table"].doLayout();
    },
    // 清除多选数据
    clearSelection() {
      this.$refs["main-table"].clearSelection();
    }
  }
};
</script>

<style scoped>
.el-table__row td {
  padding: 12px 0;
}
</style>
